<template>
  <div class="panel">
    <div class="camera-grid">
      <div v-for="camera in cameras" :key="camera.id" class="camera-item" :class="{ active: camera.active }" @click="handleCameraClick(camera)">
        <div class="camera-header">
          <span class="camera-name">{{ camera.name }}</span>
          <span class="camera-status" :class="camera.status">{{ camera.statusText }}</span>
        </div>
        <div class="camera-content">
          <div class="camera-video" v-if="camera.active">
            <video
              :ref="(el) => setVideoRef(camera.id, el)"
              class="video-player"
              preload="auto"
              muted
              autoplay
            ></video>
          </div>
          <div class="camera-placeholder" v-else>
            <el-icon class="camera-icon"><VideoCamera /></el-icon>
            <span class="camera-tip">{{ camera.active ? '实时监控中' : '未连接' }}</span>
          </div>
          <div class="camera-info">
            <div class="info-item">
              <span class="label">位置：</span>
              <span class="value">{{ camera.location }}</span>
            </div>
            <div class="info-item">
              <span class="label">分辨率：</span>
              <span class="value">{{ camera.resolution }}</span>
            </div>
            <div class="info-item">
              <span class="label">帧率：</span>
              <span class="value">{{ camera.fps }}fps</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'
import { VideoCamera } from '@element-plus/icons-vue'
import Hls from 'hls.js'
import { useVideoMonitorStore } from '@/stores/videoMonitor'

const store = useVideoMonitorStore()
const videoRefs: { [key: number]: HTMLVideoElement } = {}
const hlsPlayers: { [key: number]: Hls } = {}

const setVideoRef = (id: number, el: any) => {
  if (el) {
    videoRefs[id] = el as HTMLVideoElement
    initVideoPlayer(cameras.value.find(c => c.id === id)!)
  }
}

const cameras = ref([
  {
    id: 1,
    name: '温室1号摄像头',
    status: 'online',
    statusText: '在线',
    active: true,
    location: '温室1号东南角',
    resolution: '1920×1080',
    fps: 30,
    url: 'temp/temp.m3u8'
  },
  {
    id: 2,
    name: '温室2号摄像头',
    status: 'offline',
    statusText: '在线',
    active: false,
    location: '温室2号西北角',
    resolution: '1920×1080',
    fps: 30,
    url: ''
  },
  {
    id: 3,
    name: '仓库监控',
    status: 'offline',
    statusText: '离线',
    active: false,
    location: '农资仓库门口',
    resolution: '1280×720',
    fps: 24,
    url: ''
  },
  {
    id: 4,
    name: '大门监控',
    status: 'offline',
    statusText: '在线',
    active: false,
    location: '基地大门',
    resolution: '1920×1080',
    fps: 30,
    url: ''
  }
])

const initVideoPlayer = (camera: any) => {
  const videoElement = videoRefs[camera.id]
  if (!videoElement || !camera.active || !camera.url) return

  if (Hls.isSupported()) {
    const hls = new Hls({
      debug: false,
      enableWorker: true,
      lowLatencyMode: true
    })
    hls.loadSource(camera.url)
    hls.attachMedia(videoElement)
    hlsPlayers[camera.id] = hls
  } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
    videoElement.src = camera.url
  }
}

const handleCameraClick = (camera: any) => {
  store.openModal(camera)
}

onBeforeUnmount(() => {
  // 销毁所有 HLS 实例
  Object.values(hlsPlayers).forEach(player => {
    if (player) {
      player.destroy()
    }
  })
})
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  padding: 10px;
  position: relative;
  overflow: visible;
}

.camera-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

.camera-item {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(51, 255, 208, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.camera-item:hover {
  border-color: rgba(51, 255, 208, 0.3);
  box-shadow: 0 0 15px rgba(51, 255, 208, 0.2);
}

.camera-item.active {
  border-color: rgba(51, 255, 208, 0.2);
}

.camera-header {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(51, 255, 208, 0.1);
}

.camera-name {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.camera-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.camera-status.online {
  background: rgba(51, 255, 208, 0.2);
  color: #33ffd0;
}

.camera-status.offline {
  background: rgba(255, 77, 79, 0.2);
  color: #ff4d4f;
}

.camera-content {
  height: calc(100% - 37px);
  position: relative;
  display: flex;
  flex-direction: column;
}

.camera-video {
  flex: 1;
  position: relative;
  background: #000;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
}

.camera-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: #33ffd0;
}

.camera-tip {
  font-size: 13px;
}

.camera-info {
  padding: 8px 12px;
  border-top: 1px solid rgba(51, 255, 208, 0.1);
}

.info-item {
  display: flex;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.info-item .label {
  color: rgba(255, 255, 255, 0.6);
  width: 60px;
}

.info-item .value {
  flex: 1;
}

/* 隐藏视频控件 */
.video-player::-webkit-media-controls {
  display: none !important;
}
.video-player::-webkit-media-controls-enclosure {
  display: none !important;
}
</style> 